<template>
  <div>
    <div class="header">
      <img v-if="loddimg==true" :src="columnList.topImage.url" alt>
    </div>
    <div class="icon">
      <img v-if="loddimg==true" :src="columnList.user.icon" alt>
    </div>
    <div class="nick">
      <span>
        <img src="http://www.songguolife.com/nuts/images/icon_1.png" alt>
      </span>
      <span v-if="loddimg==true" v-text="columnList.user.nick"></span>
    </div>
    <div class="content">
      <div class="title" v-text="columnList.name"></div>
      <div class="title-box">- 课堂简介 -</div>
      <video
        class="video"
        v-if="loddimg==true && columnList.paragraphs[0].tp==1"
        :src="columnList.paragraphs[0].url"
        controls
        preload
      ></video>
      <div class="resources" v-for="(columnInfo,index) in columnList.resources" :key="index">
        <div class="url">
          <img :src="columnInfo.url" alt>
        </div>
      </div>
    </div>
    <div class="wxfooter">
      <img src="http://image.songguolife.com//weixinfooter@2x.png?imageslim" alt>
      <div class="footer" @click="onclick">我要订阅</div>
    </div>
    <x-dialog
      v-model="ie"
      :hide-on-blur="true"
      :dialog-style="{maxWidth:'600px',width:'600px',height:'263px',margin:'12vw auto',borderRadius:'10px'}"
    >
      <div class="aletr">
        <p class="navLogo">
          <img src="http://www.songguolife.com/nuts/images/navLogo.png" alt>
        </p>
        <p class="reason">参加活动请下载</p>
        <div class="iso-a">
          <div class="iso">
            <img src="http://www.songguolife.com/nuts/images/appstore.png" alt>
          </div>
          <div class="iso">
            <img src="http://www.songguolife.com/nuts/images/appstore.png" alt>
          </div>
        </div>
      </div>
    </x-dialog>

    <div class="weixin">
      <div class="tit1">
        <img src="http://www.songguolife.com/nuts/images/wechat2.png" alt>
        <span>手机扫码购买</span>
      </div>
      <div class="tit2">微信"扫一扫"立即购买</div>
      <div>
        <canvas width="160" height="160"></canvas>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { XDialog } from "vux";
export default {
  data() {
    return {
      columnList: {},
      loddimg: false,
      num: 0,
      ie: false
    };
  },
  props: ["columnId"],
  mounted() {
    this.items();
  },
  methods: {
    items: function() {
      var _this = this;
      var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
      axios
        .get(
          API_Proxy + "http://www.songguolife.com/api/column/" + this.columnId
        )
        .then(
          function(value) {
            console.log("请求成功");
            _this.columnList = value.data;
            console.log(_this.columnList.resources[0].url);
            _this.loddimg = true;
          },
          function(err) {
            console.log(err);
          }
        );
    },
    onclick: function() {
      this.ie = true;
    }
  },
  components: {
    XDialog
  }
};
</script>
<style scoped>
.header {
  width: 750px;
  height: 350px;
  margin: 0 auto;
}
.header img {
  width: 100%;
  height: 100%;
}
.icon {
  width: 144px;
  height: 144px;
  margin: 0 auto;
  position: relative;
  top: -80px;
  overflow: hidden;
}

.icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.nick {
  width: 750px;
  height: 75px;
  margin: 0 auto;
  line-height: 75px;
  text-align: center;
  color: #6d504b;
  font-size: 4rem;
}
.content {
  width: 686px;
  margin: 0 auto;
  text-align: center;
}
.title {
  width: 686px;
  line-height: 15rem;
  margin-top: 20px;
  border-top: 1px solid #e7e2e1;
  border-bottom: 1px solid #e7e2e1;
  color: #b37a55;
  text-align: center;
  font-size: 4rem;
}
.title-box {
  width: 686px;
  color: #6d504b;
  font-size: 4rem;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.video {
  width: 686px;
  height: 300px;
}
.resources {
  width: 686px;
}
.url {
  width: 686px;
}
.url img {
  width: 100%;
}
.wxfooter {
  width: 750px;
  margin: 0 auto;
}
.wxfooter img {
  width: 100%;
  margin-bottom: 120px
}
.footer {
  width: 750px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 3rem;
  color: #fff;
  background-color: #e97544;
  position: fixed;
  bottom: 0;
  margin: 0 auto;
}
.navLogo {
  width: 94px;
  height: 60px;
  padding-top: 20px;
  margin: 0 auto 30px;
}
.navLogo img {
  width: 100%;
  height: 100%;
}
.reason {
  margin-bottom: 40px;
  text-align: center;
  font-size: 18px;
  color: #352f2e;
}
.iso-a {
  width: 598px;
  height: 50px;
}
.iso {
  width: 135px;
  height: 40px;
  display: inline-block;
}
.iso img {
  width: 100%;
  height: 100%;
}
.weixin {
  width: 180px;
  position: fixed;
  top: 160px;
  left: calc(50% + 405px);
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 10px;
  text-align: center;
  background-color: #fff;
}
.tit1 {
  margin: 0 auto;
  padding-bottom: 10px;
  width: 150px;
  font-size: 16px;
  color: #00ad2e;
  border-bottom: 1px dashed #c3c3c3;
}
.tit1 img {
  margin-right: 6px;
  width: 28px;
}
.tit1 span {
  vertical-align: middle;
}
.tit2 {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}
</style>